/**
 *
 * HTML5 Image uploader with Jcrop
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2012, Script Tutorials
 * http://www.script-tutorials.com/
 */

var portion = 1;

// convert bytes into friendly format
function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB'];
    if (bytes == 0) return 'n/a';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};

// check for selected crop region
function checkForm() {
    if (parseInt($('#w').val())) return true;
    $('.error').html('Please select a crop region and then press Upload').show();
    return false;
};

// update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
    $('#x1, #x1_off').val(e.x);
    $('#y1, #y1_off').val(e.y);
    $('#x2, #x2_off').val(e.x2);
    $('#y2, #y2_off').val(e.y2);
    $('#w').val(e.w);
    $('#h').val(e.h);
};

// clear info by cropping (onRelease event handler)
function clearInfo() {
    $('.info #w').val('');
    $('.info #h').val('');
};

function fileSelectHandler() {

    // get selected file
    var oFile = $('#image_file')[0].files[0];

    // hide all errors
    $('.error').hide();

    $('#uploadModal').modal('show');

    // check for image type (jpg and png are allowed)
    var rFilter = /^(image\/jpeg|image\/png)$/i;
    if (!rFilter.test(oFile.type)) {
        $('.error').html('Please select a valid image file (jpg and png are allowed)').show();
        return;
    }

    // check for file size
    //if (oFile.size > 250 * 1024) {
    //    $('.error').html('You have selected too big file, please select a one smaller image file').show();
    //    return;
    //}

    // preview element
    $('.jcrop-holder').remove();
    $('#preview').remove();


    // prepare HTML5 FileReader
    var oReader = new FileReader();
    oReader.onload = function(e) {
        $('.info').before('<img id="preview"/>');
        var oImage = document.getElementById('preview');

        // e.target.result contains the DataURL which we can use as a source of the image
        oImage.src = e.target.result;
        //oImage.onload = function () { // onload event handler

        // display step 2
        $('.step2').fadeIn(500);

        // display some basic image info
        var sResultFileSize = bytesToSize(oFile.size);
        $('#filesize').val(sResultFileSize);
        $('#filetype').val(oFile.type);
        $('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);

        // Create variables (in this scope) to hold the Jcrop API and image size
        var jcrop_api, boundx, boundy;

        // destroy Jcrop if it is existed
        if (typeof jcrop_api != 'undefined')
            jcrop_api.destroy();

        // initialize Jcrop
        $('#preview').Jcrop({
            minSize: [32, 32], // min crop size
            aspectRatio: 1, // keep aspect ratio 1:1
            bgFade: true, // use fade effect
            bgOpacity: .3, // fade opacity
            boxWidth: window.innerWidth * .8,
            keySupport: false,
            onChange: updateInfo,
            onSelect: updateInfo,
            onRelease: clearInfo
        }, function() {

            // use the Jcrop API to get the real image size
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];

            //portion = window.innerWidth *.9 / boundx;
            // Store the Jcrop API in the jcrop_api variable
            jcrop_api = this;
            jcrop_api.setSelect([0,0,100,100]);
        });
        //};
    };

    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
}